#{extends 'main.html' /}
#{set title:'search.html' /}



<script type="text/javascript">
/*
	Calls the method getLocation when document is loaded
*/
$(document).ready(function() {
      getLocation();
});

/*
	Gets the current position and forwards it to showPosition
*/
function getLocation() {
	if (navigator.geolocation) {
    	navigator.geolocation.getCurrentPosition(showPosition);
    }
	else{
		$('#searchGeo').html("Geolocation is not supported by this browser.");
	}
}

/*
	Stores the current position in the hiddeninput attributes and displays them to the user
*/
function showPosition(position) {
	$('#searchGeo').html("Latitude: " + position.coords.latitude + 
	"<br>Longitude: " + position.coords.longitude); 
	$('#latitude').val(position.coords.latitude);
	$('#longitude').val(position.coords.longitude);
	
}



</script>

<div id="searchDiv">
#{form @Views.searchResults()}
	<div id="searchTitle">MoSEn</div>
	<input type="text" id="keywords" name="keywords" /> <br /> <input type="submit" value="search" /><br /><br />
	<small><input type="checkbox" name="nearby" id="nearby" value="true" /><label for="nearby">Search for objects nearby</label></small>
	<input type="hidden" name="nearby" value="false" />
	<input type="hidden" id="latitude" name="latitude" /> <input type="hidden" id="longitude" name="longitude" /> 
	<div id="searchGeo"></div> 
#{/form}	
	
</div>